<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        累计余额：
        <span style="color: red;margin-right: 8px;">{{ info.totalBalance }}</span>
        可用余额：
        <span style="color: red;margin-right: 8px;">{{ info.balance }}</span>
        已使用：
        <span style="color: red;">{{ parseFloat(info.totalBalance - info.balance).toFixed(2) }}</span>
      </el-form-item>

      <el-form-item style="float: right;">
        <el-date-picker
          size="small"
          v-model="otherDate"
          @change="getDataList()"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
      <el-table-column prop="createDate" header-align="center" align="center" label="日期"></el-table-column>
      <el-table-column prop="amount" header-align="center" align="center" label="金额"></el-table-column>
      <el-table-column prop="note" header-align="center" align="center" label="备注"></el-table-column>
      <el-table-column header-align="center" align="center" label="所属门店">
        <template slot-scope="scope">
          <span>{{info.sellerName}}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" label="消费门店">
        <template slot-scope="scope">
          <span>{{scope.row.produceSellerName}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近半年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      dataForm: {
        userId: '',
        otherDate: '',
        seller_id: '',
      },
      info: {
        totalBalance: 0,
        balance: 0,
        sellerName:''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      otherDate: ''
    };
  },
  components: {},
  activated() {
    this.getDataList();
  },
  mounted: function() {
    this.getDataList();
  },
  methods: {
    moment(date) {
      return moment(date).format('YYYY-MM-DD');
    },
    init(userId, sellerId ,totalBalance, balance,sellerName) {
      this.$nextTick(() => {
        this.dataForm.userId = userId;
        this.dataForm.seller_id = sellerId;
        this.info.totalBalance = totalBalance;
        this.info.balance = balance;
        this.info.sellerName = sellerName;
        console.log(userId);
        this.getDataList();
      });
    },
    formtState(state) {
      var stratStr = '<span class="el-tag ';
      var centerStr = ' el-tag--medium">';
      var endStr = '</span>';
      switch (state) {
        case 0:
          return stratStr + 'el-tag--danger' + centerStr + '发送失败' + endStr;
          break;
        case 1:
          return stratStr + 'el-tag--success' + centerStr + '发送成功' + endStr;
          break;
        case 2:
          return stratStr + '' + centerStr + '正在发送' + endStr;
          break;
        case 3:
          return stratStr + 'el-tag--info' + centerStr + '待退款' + endStr;
          break;
        case 4:
          return stratStr + 'el-tag--info' + centerStr + '已退款' + endStr;
          break;
      }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      if (this.otherDate) {
        const start = Date.parse(new Date(this.otherDate[0])) / 1000;
        const end = Date.parse(new Date(this.otherDate[1])) / 1000;
        this.dataForm.otherDate = start + ',' + end;
        console.log(this.dataForm.otherDate);
      }
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelconsumptionrecord/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          ...this.dataForm
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    }
  }
};
</script>
